<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between">
        <span style="color:red;font-size:12px;opacity:0.5">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" size="medium" @click="add">新增试题</el-button></el-row>

      <el-form ref="myform" :inline="true" :model="selectForm" :label-position="labelPosition">
        <el-form-item label="学科" label-width="100px" prop="subjectID">
          <el-select v-model="selectForm.subjectID" placeholder="请选择">
            <el-option v-for="item,index in simpleSubject" :key="index" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录" prop="catalog">
          <el-select v-model="selectForm.catalog" placeholder="请选择">
            <el-option v-for="item,index in questionList" :key="index" :value="item.catalog" :label="item.catalog" />
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-select v-model="selectForm.tags" placeholder="请选择">
            <el-option v-for="item,index in questionList" :key="index" :value="item.tags" :label="item.tags" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="selectForm.keyword" placeholder="根据题干搜索" />
        </el-form-item>
        <el-form-item label="试题类型" label-width="100px" prop="questionType">
          <el-select v-model="selectForm.questionType" placeholder="请选择">
            <el-option label="单选" value="1" />
            <el-option label="多选" value="2" />
            <el-option label="简答" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-select v-model="selectForm.difficulty" placeholder="请选择">
            <el-option label="简单" value="简单" />
            <el-option label="一般" value="一般" />
            <el-option label="困难" value="困难" />
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select v-model="selectForm.direction" placeholder="请选择">
            <el-option v-for="item,index in questionList" :key="index" :value="item.direction" :label="item.direction" />
          </el-select>
        </el-form-item>
        <el-form-item label="录入人" prop="creatorID">
          <el-select v-model="selectForm.creatorID" placeholder="请选择">
            <el-option v-for="item,index in questionList" :key="index" :value="item.creatorID" :label="item.creatorID" />
          </el-select>
        </el-form-item>
        <el-form-item prop="remarks" label="题目备注" label-width="100px">
          <el-input v-model="selectForm.remarks" />
        </el-form-item>
        <el-form-item label="企业简称" prop="shortName">
          <el-input v-model="selectForm.shortName" />
        </el-form-item>

        <el-form-item
          label="城市"
          prop="userCitys"
        >
          <el-select
            v-model="selectForm.userCitys"
            placeholder="请选择"
            @change="hchangecity"
          >
            <el-option
              v-for="(item, index) in selectForm.citys"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
          --
          <el-select
            v-model="selectForm.usercitys2"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in selectForm.citys2"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-button style="margin-left:20px" plain size="small" @click="clear">清除</el-button>
        <el-button type="primary" size="small" @click="search">搜索</el-button>
      </el-form>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-alert
          :title="`数据一共${page.total}条`"
          type="info"
          show-icon
        />
        <el-tab-pane label="全部" name="all">
          <selectTable ref="selectTable" :question-list="questionList" @delQ="delfn" @onPublish="onPublishfn" @offPublish="offPublishfn" @onCheck="onCheckfn" />
        </el-tab-pane>
        <el-tab-pane  label="待审核" name="toBechk">
          <selectTable ref="selectTable" :question-list="questionList" @delQ="delfn" @onPublish="onPublishfn" @offPublish="offPublishfn"  @onCheck="onCheckfn" />
        </el-tab-pane>
        <el-tab-pane label="已审核" name="checked">
          <selectTable ref="selectTable" :question-list="questionList" @delQ="delfn" @onPublish="onPublishfn" @offPublish="offPublishfn"  @onCheck="onCheckfn" />
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="refused">
          <selectTable ref="selectTable" :question-list="questionList" @delQ="delfn" @onPublish="onPublishfn" @offPublish="offPublishfn"  @onCheck="onCheckfn" />
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>

<script>
import { getSeclectedQustion, getSimpleSubjectList, getSelDetailQustion } from '@/api/question/index'
import selectTable from '@/views/question/selectedQuestion/selectTable.vue'
// 导入城市接口
import { provinces, citys } from '@/api/question/citys'

export default {
  components: {
    selectTable

  },

    data() {
      return {
          selectedDetailList: [],
          dialogVisible: false,
          showcheck: false,
          activeName: 'all',
          questionList: [],
          page: {
              page: 1,
              pagesize: 10,
              total: 0
        },
        selectForm: {
                subjectID: '',
                catalog: [],
                tags: '',
                keyword: '',
                questionType: '',
                difficulty: '',
                direction: '',
                creatorID: '',
                remarks: '',
                shortName: '',
                city: [],
                city2: [],
                userCitys: '',
                userCitys2: '',
                region: '',
                chkState: '',
                chkRemarks: '',
                chkUser: '',
                publishState: ''

        },
        simpleSubject: [],
        labelPosition: 'right',
        curQuestion: {},
        curcheck: '',
        radio: '1',
        textarea: '',
        checkOpinion: {}

        }
  },
  watch: {
     // 监听 城市省份的变化
  'selectForm.userCitys': {
     async handler(newValue) {
        const res = await citys(newValue)
      this.selectForm.citys2 = res
      },
      immediate: true
      }
    },
  created() {
    this.getSeclectedQustion(this.page)
    // this.getSelDetailQustion({ id: 29 })
    this.getSimpleSubjectList()
    this.loadCitys()
  },
  methods: {
    add() {
      this.$router.push('/question/new')
    },
     // 当城市更换的时候将后面的城区清空
     hchangecity() {
      this.selectForm.usercitys2 = ''
    },
    async loadCitys() {
      try {
        const res = await provinces()
        // console.log(res)
        this.selectForm.citys = res
      } catch (err) {
        console.log(err)
      }
    },
     // 清空表单
     clear() {
      this.$refs.myform.resetFields()
      this.getSeclectedQustion(this.page)
    },
    // 搜索
    search() {
      this.getSeclectedQustion({ ...this.selectForm, ...this.page })
    },
    handleClick(tab, event) {
      // console.log(tab, event)
      console.log(tab.index)
      if (tab.index == 0) {
        this.getSeclectedQustion(this.page)
        this.$refs.selectTable.mytable = 0
          // console.log(this.$refs.mytable.mytable, '--------------')
        } else if (tab.index == 1) {
          // 待审核
        this.getSeclectedQustion({ ...this.page, chkState: 0 })
        this.$refs.selectTable.mytable = 1
        console.log(this.$refs.selectTable.mytable, '--------------')
        } else if (tab.index == 2) {
          // 已审核
        this.getSeclectedQustion({ ...this.page, chkState: 1 })
        this.$refs.selectTable.mytable = 2
        console.log(this.$refs.selectTable.mytable, '--------------')
        } else if (tab.index == 3) {
          // 已拒绝
        this.getSeclectedQustion({ ...this.page, chkState: 2 })
        this.$refs.selectTable.mytable = 3
        console.log(this.$refs.selectTable.mytable, '--------------')
        }

        // this.questionList = this.questionList.map(item => {
        //   return item.chkState === 0
        //   })
      },
      // 精选题库列表
    async  getSeclectedQustion(data) {
      const res = await getSeclectedQustion(data)
      console.log('精选题库列表', res)
      this.questionList = res.items
      this.page.total = res.counts
    },
      // 精选题库详情
    async getSelDetailQustion(id) {
      const res = await getSelDetailQustion(id)
      console.log('精选题库详情', res)
      },
      // 获取学科简单列表
    async getSimpleSubjectList() {
      const res = await getSimpleSubjectList()
      console.log('学科简单列表', res)
      // res.forEach(item => {
      //     console.log(item.value)
      // })
      this.simpleSubject = res
    },
    // 删除题目
    delfn(msg) {
      this.renderList(msg)
    },
     // 上架
    onPublishfn(msg) {
      console.log(msg,'接收到的table值')
      this.renderList(msg)
    },
    // 下架
    offPublishfn(msg) {
      this.renderList(msg)
    },
    // 审批
    onCheckfn(msg) {
      this.renderList(msg)
    },
    // 渲染列表函数
    renderList(index) {
      if (index == 0) {
        this.getSeclectedQustion(this.page)
      } else if (index == 1) {
        this.getSeclectedQustion({ ...this.page, chkState: 0 })
      } else if (index == 2) {
        this.getSeclectedQustion({ ...this.page, chkState: 1 })
      } else {
        this.getSeclectedQustion({ ...this.page, chkState: 2 })
      }
    }

    }
}

</script>

<style lang="scss" scoped>

</style>